<template>
    <div class="tabber">
        <van-tabbar v-model="currentIndex" :route="true" active-color="#ff9854">
            <template v-for="(item,index) in data" :key="index">
                <van-tabbar-item 
                    :name="index" 
                    :to="item.path"
                >
                    <template #icon>
                        <img :src="getUrl(item.url)" alt=""  v-if="index !== currentIndex">
                        <img :src="getUrl(item.actionURL)" alt="" v-else="index === currentIndex">
                    </template>
                    {{ item.title }}
                </van-tabbar-item>
            </template>
        </van-tabbar>
    </div>
    
</template>

<script setup>
   import {getUrl} from "@/utils/getUrl"
   import { ref } from "vue"
   import {useRouter} from "vue-router"

   
   const router = useRouter()

   const currentIndex = ref(0)
   const data=[
       {
           title:"首页",
           path:"/home",
           url: "tabbar/tab_home.png",
           actionURL:"tabbar/tab_home_active.png"
       },
       {
           title:"收藏",
           path:"/favor",
           url: "tabbar/tab_favor.png",
           actionURL:"tabbar/tab_favor_active.png"
       },
       {
           title:"订单",
           path:"/order",
           url: "tabbar/tab_order.png",
           actionURL:"tabbar/tab_order_active.png"
       },
       {
           title:"信息",
           path:"/message",
           url: "tabbar/tab_message.png",
           actionURL: "tabbar/tab_message.png"
       }
   ]
</script>

<style lang="less" scoped>
</style>